<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
</head>
<style>
	#form {
		width: 500px;
		margin: 0 auto;
		margin-top: 300px;
	}
</style>

<!-- 利用时间补偿 -->

<body>
	<form action="" id="form">
		<div>理想时间<input name="ideal" type="text" /></div>
		<div>实际时间<input name="real" type="text" /></div>
	</form>
	<script>
		let speed = 50;
		let counter = 1;
		let start = new Date().getTime();

		function instance() {
			if (counter > 100) return;

			let ideal = counter * speed;

			let real = new Date().getTime() - start;

			counter++;

			form.ideal.value = ideal;
			form.real.value = real;

			window.setTimeout(instance, speed - (real - ideal)); // 通过系统时间进行修复
		}

		window.setTimeout(instance, speed);
	</script>

	<p id="message"></p>

	<script type="text/javascript">
		var message = document.getElementById('message');
		var count = 1000;
		function animate() {
			var start = +new Date();
			message.innerHTML = count--;
			var finish = +new Date();
			setTimeout(animate, 1000 - (finish - start));
		}
		animate();
	</script>
</body>

</html>
